---
title: Sviluppo e build
description: 'Come iniziare a lavorare su un nuovo progetto.'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Quando hai ottenuto un progetto Astro, sei pronto a fare la build con Astro! 🚀

## Modifica il tuo progetto

Per apportare modifiche al tuo progetto, apri la cartella del progetto nel tuo editor di codice. Lavorare in modalità di sviluppo con il server dev in esecuzione ti consente di vedere gli aggiornamenti al tuo sito mentre modifichi il codice.

Puoi anche [personalizzare aspetti del tuo ambiente di sviluppo](#configura-il-tuo-ambiente-di-sviluppo) come la configurazione di TypeScript o l'installazione delle estensioni ufficiali dell'editor Astro.

### Avvia Astro dev server

Astro include un server di sviluppo integrato che ha tutto il necessario per lo sviluppo del progetto. Il comando CLI `astro dev` avvierà il server di sviluppo locale in modo che tu possa vedere il tuo nuovo sito in azione per la prima volta.

Ogni modello di partenza viene fornito con uno script preconfigurato che eseguirà `astro dev` per te. Dopo essere entrato nella directory del tuo progetto, utilizza il tuo gestore di pacchetti preferito per eseguire questo comando e avviare il server di sviluppo Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


Se tutto va bene, Astro ora servirà il tuo progetto su [http://localhost:4321/](http://localhost:4321/). Visita quel link nel tuo browser e vedrai il tuo nuovo sito!

### Lavorare in modalità di sviluppo

Astro sarà in ascolto per le modifiche ai file live nella tua directory `src/` e aggiornerà l'anteprima del tuo sito mentre crei, quindi non sarà necessario riavviare il server mentre apporti modifiche durante lo sviluppo. Sarai sempre in grado di vedere una versione aggiornata del tuo sito nel browser quando il server di sviluppo è in esecuzione.

Quando visualizzi il tuo sito nel browser, avrai accesso alla [Toolbar di sviluppo Astro](/it/guides/dev-toolbar/). Mentre costruisci, ti aiuterà a ispezionare le tue [Isole Astro](/it/concepts/islands/), individuare problemi di accessibilità e altro ancora.	

Se non sei in grado di aprire il tuo progetto nel browser dopo aver avviato il server di sviluppo, torna al terminale in cui hai eseguito il comando `dev` e controlla il messaggio visualizzato. Dovrebbe dirti se si è verificato un errore o se il tuo progetto viene servito a un URL diverso da [http://localhost:4321/](http://localhost:4321/).

## Fase di Build e anteprima del tuo sito

Per verificare la versione del tuo sito che verrà creata al momento della build, interrompi il server dev (<kbd>Ctrl</kbd> + <kbd>C</kbd>) ed esegui il comando di build appropriato per il tuo gestore di pacchetti nel tuo terminale:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro creerà una build pronta per il deploy del tuo sito in una cartella separata (`dist/` per impostazione predefinita) e potrai seguire il suo progresso nel terminale. Questo ti avviserà di eventuali errori di build nel tuo progetto prima di effettuare il deploy in produzione. Se TypeScript è configurato su `strict` o `strictest`, lo script `build` controllerà anche il tuo progetto per errori di tipo.

Quando la build è terminata, esegui il comando `preview` appropriato (ad esempio `npm run preview`) nel tuo terminale e potrai visualizzare la versione compilata del tuo sito in locale nella stessa finestra di anteprima del browser.

Nota che questa anteprima mostra il tuo codice come era quando è stato eseguito l'ultimo comando di build. Questo è pensato per darti un'anteprima di come apparirà il tuo sito quando verrà distribuito sul web. Eventuali modifiche successive che apporti al tuo codice dopo la fase di build **non** verranno riflesse durante l'anteprima del tuo sito finché non esegui nuovamente il comando di build.

Usa (<kbd>Ctrl</kbd> + <kbd>C</kbd>) per uscire dall'anteprima e avviare un altro comando nel terminale, ad esempio riavviare il server di sviluppo per tornare a [lavorare in modalità di sviluppo](#lavorare-in-modalità-di-sviluppo) che si aggiorna mentre modifichi per mostrarti un'anteprima live delle modifiche al codice.

<ReadMore>Scopri di più sull' [Interfaccia da riga di comando Astro](/it/reference/cli-reference/) e sui comandi del terminale che userai mentre costruisci con Astro.</ReadMore>

:::tip 
Potresti voler [effettuare il deploy del tuo nuovo sito subito](/it/guides/deploy/), prima di iniziare ad aggiungere o modificare troppo codice. Questo è utile per ottenere una versione minima e funzionante del tuo sito pubblicata e può risparmiarti tempo e sforzi extra nel risolvere i problemi di deploy in seguito.
:::

## Prossimi passi

Congratulazioni! Sei ora pronto per iniziare a costruire con Astro! 🥳

Ecco qualche piccolo suggerimento su cosa esplorare in seguito. Puoi leggerli in qualsiasi ordine. Puoi anche lasciare la nostra documentazione per un po' e giocare nel codice del tuo nuovo progetto Astro, tornando qui ogni volta che incontri problemi o hai domande.

### Configura il tuo ambiente di sviluppo

Esplora le guide qui sotto per personalizzare la tua esperienza di sviluppo.

<CardGrid>
  <LinkCard
    title="Configurazione dell'editor"
    description="Personalizza il tuo editor di codice per migliorare l'esperienza di sviluppo con Astro e sbloccare nuove funzionalità."
    href="/it/editor-setup/"
  />
  <LinkCard
    title="Toolbar di sviluppo"
    description="Esplora le utili funzionalità della toolbar di sviluppo."
    href="/it/guides/dev-toolbar/"
  />
  <LinkCard
    title="Configurazione con TypeScript"
    description="Configura le opzioni per il type-checking, l'IntelliSense e altro ancora."
    href="/it/guides/typescript/"
  />
</CardGrid>

### Esplora le funzionalità di Astro

<CardGrid>
  <LinkCard
    title="Comprendi il tuo codice"
    description="Scopri la struttura dei file di Astro nella nostra guida alla Struttura del Progetto."
    href="/it/basics/project-structure/"
  />
  <LinkCard
    title="Crea collezioni di contenuti"
    description="Aggiungi contenuti al tuo nuovo sito con la validazione dell'avantesto `frontmatter` e la sicurezza automatica dei tipi."
    href="/it/guides/content-collections/" 
  />
    <LinkCard
    title="Aggiungi transizioni di visualizzazione"
    description="Crea transizioni e animazioni di pagina fluide."
    href="/it/guides/view-transitions/"
  />
  <LinkCard
    title="Scopri le Isole Astro"
    description="Leggi l'Architettura a Isole in Astro."
    href="/it/concepts/islands/"
  />
</CardGrid>

### Svolgi il tutorial introduttivo

Costruisci un blog Astro completamente funzionale partendo da una singola pagina vuota nel nostro [tutorial introduttivo](/it/tutorial/0-introduction/).

Questo è un ottimo modo per vedere come funziona Astro e ti guiderà attraverso i concetti di base delle pagine, layout, componenti, routing, Astro Isole e altro ancora. Include anche un'unità opzionale per principianti, che guiderà coloro che sono nuovi ai concetti di sviluppo web in generale, attraverso l'installazione delle applicazioni necessarie sul tuo computer, la creazione di un account GitHub e il deploy del tuo sito.

